<template>
	<view class="container">
		<u-tabs :list="list" :is-scroll="false" active-color="#111111" :current="current" @change="change"></u-tabs>
		<view class="card-content" v-show="current==0">
			<view class="card-head">提现方式</view>
			<view class="card-body">
				<view class="selectBox">
					<input v-model="input" placeholder="请输入充值金额" placeholder-class="placeholderClass">
				</view>
				<view class="selectPrice">
					<view class="selectPrice-title">其他金额</view>
					<view class="selectPrice-list">
						<view class="l-button" v-for="item in priceList" :key="item" @click="input = item">￥{{item}}</view>
						<view class="tips">注：充值金额默认为人民币；</view>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="button sumbit">确定充值</view>
				<view class="button cancel">取消</view>
			</view>
		</view>
		<view class="card-content" v-show="current==1">
			<view class="card-head">收款账户信息</view>
			<view class="card-body">
				<view class="body-list">
					<view class="list-name">收款账户</view>
					<view class="list-value">{{userInfo.bankName}}</view>
				</view>
				<view class="body-list">
					<view class="list-name">收款账号</view>
					<view class="list-value">{{userInfo.bankNo}}</view>
				</view>
				<view class="body-list">
					<view class="list-name">收款开户行</view>
					<view class="list-value">{{userInfo.createBank}}</view>
				</view>
			</view>
			<view class="tips" style="margin: 0 40rpx;">
				<p>注意事项：</p>
				<p>1.提现是需要收取0.6%的手续费；</p>
				<p>2.如需更换收款账户，请联系平台客服；</p>
				<p>3.由于是线下转账，到账时间依赖银行流程，需要1-3个工作日才能到账；</p>
				<p>4.如有疑问请联系平台客服，工作时间：周一至周五工作日9：30-18：30。</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		channelMerImageInfo
	} from '@/api/api.js'
	import * as financialMcApi from "@/api/financialMcApi.js";
	export default {
		data() {
			return {
				input:'',
				current: 0,
				list: [{
						name: "线上充值",
						value: "0",
					},
					{
						name: "线下打款",
						value: "1",
					},
				],
				priceList:[5000,10000,50000,80000,100000],
				userInfo:{}
			}
		},
		onLoad() {
			this.getChannelMerImageInfo()
		},
		methods: {
			getChannelMerImageInfo() {
				let _this = this
				channelMerImageInfo().then(res => {
					_this.userInfo = res.data
				})
			},
			change(e) {
				this.current = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.card-content {

		.card-head {
			padding: 40rpx 40rpx 30rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.card-body {
			margin: 0 40rpx;
			overflow: hidden;
			.selectPrice{
				display: flex;
				margin-top: 30rpx;
			}
			.selectPrice-title{
				flex-shrink: 0;
				text-align: center;
				height: 64rpx;
				line-height: 64rpx;
				margin-right: 25rpx;
				color: #999999;
			}
			.selectPrice-list {
				display: flex;
				flex-wrap: wrap;
				
			}
			
			
			.l-button {
				width: 142rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border: 1rpx solid #6D7278;
				margin-bottom: 12rpx;
			}
			.l-button:nth-child(3n-1) {
				margin:0 54rpx;
			}
		}

		.selectBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			background-color: #F2F2F2;
		}

		.iconfont {
			font-size: 20rpx;
		}
		.tips {
			color: #999999;
			font-size: 20rpx;
		}
		.bottom-box{
			margin: 150rpx 30rpx 0;
			.button{
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				border: 1rpx solid #111111;
			}
			.sumbit{
				color: #FFFFFF;
				background-color: #111111;
			}
			
			.button~.button{
				margin-top: 36rpx;
			}
		}
		
		.body-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 34rpx 0;
		
			.list-name {
				flex-shrink: 0;
				width: 140rpx;
				color: #666666;
			}
		
			.list-value {
				margin-left: 20rpx;
				font-weight: bold;
			}
		}
	}

	
</style>
